<template>
  <div class="addJob">
    <mains :title="'新增职称'">
      <template #content>
        <Card style="width: 100%">
          <template #title>
            <div class="title">编辑职称信息</div>
          </template>
          <!-- 表单区域 -->
          <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80" label-position="left">
            <FormItem label="职称名称" prop="rolename">
              <Input v-model="formValidate.rolename" placeholder="请输入职称" style="width: 240px;"></Input>
            </FormItem>
            <FormItem label="挂号费" prop="money">
                <Input v-model="formValidate.money" placeholder="请输入挂号费用" style="width: 240px;"></Input>
            </FormItem>
            <FormItem label="职称描述" prop="describe">
              <Input v-model="formValidate.describe" placeholder="请输入职称描述" style="width: 240px;"></Input>
            </FormItem>
            <FormItem label="角色状态" prop="isEnable">
              <Switch v-model="formValidate.isEnable" />
            </FormItem>
            <FormItem>
              <Button type="primary" @click="handleSubmit('formValidate')">保存</Button>
              <Button @click="handleReset('formValidate')" style="margin-left: 8px">取消</Button>
            </FormItem>
          </Form>
        </Card>
      </template>
    </mains>
  </div>
</template>

<script setup>
import mains from '@/components/main.vue'
import { ref } from 'vue'

let formValidate = ref({
  rolename: '',
  describe: '',
  isEnable: true,
  money: ''
})
const ruleValidate = ref({
  rolename: [
    {
      required: true,
      message: '请输入角色名称',
      trigger: 'blur',
    },
  ],
  describe: [
    {
      required: true,
      message: '请输入角色描述',
      trigger: 'blur',
    },
  ],
  money: [
    {
      required: true,
      message: '请输入费用金额',
      trigger: 'blur',
    }
  ],
})
</script>

<style scoped>
.addJob {
  :deep(.ivu-card-head) {
    background: #ebeef1;
  }
  .title {
    font-size: 16px;
    font-weight: 800;
    color: #409eff;
  }
}
</style>